<!DOCTYPE html>
<html lang="zh" class="js csstransforms3d">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Hugo 0.93.0" />
    <meta name="description" content="Documentation for Hugo Learn Theme">
<meta name="author" content="Mathieu Cornic">

    <link rel="icon" href="/images/favicon.png" type="image/png">

    <title>vue基础入门 :: welcome to my blog</title>

    
    <link href="/css/nucleus.css?1648731304" rel="stylesheet">
    <link href="/css/fontawesome-all.min.css?1648731304" rel="stylesheet">
    <link href="/css/hybrid.css?1648731304" rel="stylesheet">
    <link href="/css/featherlight.min.css?1648731304" rel="stylesheet">
    <link href="/css/perfect-scrollbar.min.css?1648731304" rel="stylesheet">
    <link href="/css/auto-complete.css?1648731304" rel="stylesheet">
    <link href="/css/atom-one-dark-reasonable.css?1648731304" rel="stylesheet">
    <link href="/css/theme.css?1648731304" rel="stylesheet">
    <link href="/css/tabs.css?1648731304" rel="stylesheet">
    <link href="/css/hugo-theme.css?1648731304" rel="stylesheet">
    
    <link href="/css/theme-green.css?1648731304" rel="stylesheet">
    
    

    <script src="/js/jquery-3.3.1.min.js?1648731304"></script>

    <style>
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
    </style>
    
  </head>
  <body class="" data-url="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
    <nav id="sidebar" class="showVisitedLinks">



  <div id="header-wrapper">
    <div id="header">
      <a id="logo" href='/'>

<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">
<g>
	<path d="M35,0c9.6,0,17.9,3.4,24.7,10.3c6.8,6.8,10.3,15,10.3,24.7c0,9.7-3.4,17.9-10.3,24.7c-6.8,6.8-15,10.3-24.7,10.3
		c-9.7,0-17.9-3.4-24.7-10.3C3.4,52.8,0,44.6,0,34.9c0-9.6,3.4-17.9,10.3-24.7C17.1,3.4,25.3,0,35,0z M22.3,63.7
		c0.3-7.4,0.3-14.7,0-22.1c-2.1-0.4-4-0.4-5.9,0c-0.2,0.8-0.2,2.5-0.1,4.9c0.1,2.3,0,3.9-0.3,4.8c-1.7-0.6-2.7-2.1-3.1-4.6
		c-0.1-0.7-0.1-3.3-0.1-8c0-14.5-0.1-23-0.3-25.6c-3.6,4.1-5.6,7-5.9,8.5v10.9c0,4.5,0.1,8.1,0.2,10.9c0,0.4,0,1.3-0.1,2.8
		c-0.1,1.2,0,2.1,0.1,2.6c0.1,0.6,1.1,2.1,2.8,4.7C13.2,58.7,17.5,62.2,22.3,63.7z M44.6,65.4c0.3-5,0.2-12.9-0.1-23.6
		c-2.1-0.3-4.1-0.3-5.9,0c-0.2,2-0.2,5.1-0.1,9.5c0.1,4.3,0,7.5-0.1,9.5c-2.9,0.4-5,0.3-6.2-0.1c-0.2-5.6-0.2-15.2-0.1-28.7
		c0.1-12.4,0-21.8-0.3-28.3c-2.4,0.1-4.3,0.6-5.7,1.3c-0.1,7.7-0.2,17.7-0.1,30.1c0,16.5,0,26.6,0,30.3c2.3,1.1,5.4,1.7,9.4,1.7
		C38.9,66.9,42.1,66.4,44.6,65.4z M48.1,64.1c9.7-4.6,15.7-12,18-22.2c-1.8-0.2-3.8-0.3-6.1-0.3c-1.6,3.9-2.6,6.3-3.2,7.2
		c-1.1,1.7-2,2.5-2.7,2.5C54,46,54,39.1,54,30.5c0-11.5,0-18.4,0-20.9c-1.4-1.4-3.3-2.5-5.7-3.4C48.1,6.3,48,6.4,48,6.7
		c0,3.5,0,13.1,0,28.8C47.9,47.2,48,56.8,48.1,64.1z"/>
</g>
<g>
	<path d="M116.6,51.3h-29c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.6-0.7-1c-0.2-0.4-0.2-0.8-0.2-1.3V16.3h6.3
		V45h25.8V51.3z"/>
	<path d="M154.8,51.3h-22.9c-0.9,0-1.8-0.2-2.9-0.5c-1-0.3-2-0.8-2.9-1.5c-0.9-0.7-1.6-1.6-2.2-2.8c-0.6-1.1-0.9-2.5-0.9-4.2V19.5
		c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2h28.6v6.3h-25.4v19.8
		c0,0.8,0.2,1.5,0.7,1.9s1.1,0.7,1.9,0.7h22.9V51.3z M151.9,37h-20v-6.4h20V37z"/>
	<path d="M197.3,51.3H191v-8.6h-22.3v8.6h-6.3V33.8c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.7-5.5c1.6-1.5,3.4-2.8,5.5-3.6
		c2.1-0.9,4.5-1.3,7-1.3h14.3c0.4,0,0.9,0.1,1.2,0.2c0.4,0.2,0.7,0.4,1,0.7s0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2V51.3z
		 M168.7,36.4H191V22.6h-11.2c-0.2,0-0.6,0-1.2,0.1c-0.6,0.1-1.4,0.2-2.2,0.4c-0.8,0.2-1.7,0.6-2.6,1c-0.9,0.5-1.8,1.1-2.5,2
		c-0.8,0.8-1.4,1.9-1.9,3.1c-0.5,1.2-0.7,2.8-0.7,4.5V36.4z"/>
	<path d="M241.7,28.1c0,1.4-0.2,2.7-0.5,3.9c-0.4,1.1-0.8,2.1-1.5,3c-0.6,0.9-1.3,1.6-2.1,2.2c-0.8,0.6-1.6,1.1-2.5,1.5
		c-0.9,0.4-1.8,0.7-2.6,0.9c-0.9,0.2-1.7,0.3-2.5,0.3l13.3,11.5h-9.8l-13.2-11.5h-4.6v-6.3H230c0.8-0.1,1.5-0.2,2.2-0.5
		c0.7-0.3,1.2-0.6,1.7-1.1c0.5-0.5,0.9-1,1.1-1.6c0.3-0.6,0.4-1.4,0.4-2.2v-4c0-0.4,0-0.6-0.1-0.8c-0.1-0.2-0.2-0.3-0.3-0.4
		c-0.1-0.1-0.3-0.1-0.4-0.2c-0.2,0-0.3,0-0.4,0h-20.9v28.7h-6.3V19.5c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1
		c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2H234c1.4,0,2.6,0.3,3.6,0.8s1.8,1.2,2.4,1.9c0.6,0.8,1,1.6,1.3,2.5
		c0.3,0.9,0.4,1.7,0.4,2.5V28.1z"/>
	<path d="M285.1,48.6c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.6,0.5-1,0.7c-0.4,0.2-0.8,0.2-1.2,0.2
		c-0.4,0-0.8-0.1-1.2-0.2c-0.4-0.1-0.8-0.4-1.1-0.7l-23.2-24.2v24.7h-6.3V19c0-0.7,0.2-1.2,0.5-1.8c0.4-0.5,0.8-0.9,1.4-1.2
		c0.6-0.2,1.2-0.3,1.9-0.2s1.2,0.4,1.6,0.9l23.2,24.2V16.3h6.3V48.6z"/>
</g>
</svg>

</a>

    </div>
    
        <div class="searchbox">
    <label for="search-by"><i class="fas fa-search"></i></label>
    <input data-search-input id="search-by" type="search" placeholder="">
    <span data-search-clear=""><i class="fas fa-times"></i></span>
</div>

<script type="text/javascript" src="/js/lunr.min.js?1648731304"></script>
<script type="text/javascript" src="/js/auto-complete.js?1648731304"></script>
<script type="text/javascript">
    
        var baseurl = "\/";
    
</script>
<script type="text/javascript" src="/js/search.js?1648731304"></script>

    
  </div>
  

    <div class="highlightable">
    <ul class="topics">

        
          
          




 
  
    
    <li data-nav-id="/javascript/" title="— JavaScript" class="dd-item
        
        
        
        ">
      <a href="/javascript/">
          <b>1. </b>— JavaScript
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/">
          JS定时器应用
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/ajax/" title="Ajax简单介绍" class="dd-item
        
        
        
        ">
      <a href="/javascript/ajax/">
          Ajax简单介绍
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
          JS对象拷贝
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" class="dd-item
        
        
        
        ">
      <a href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/">
          JS中的内存机制
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" title="JS遍历方法总结" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">
          JS遍历方法总结
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/node.js/" title="— Node.js" class="dd-item
        
        
        
        ">
      <a href="/node.js/">
          <b>2. </b>— Node.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/node.js/koa%E5%9F%BA%E7%A1%80/" title="Koa创建本地服务器" class="dd-item ">
        <a href="/node.js/koa%E5%9F%BA%E7%A1%80/">
        Koa创建本地服务器
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/" title="Nunjucks模板引擎常用基础" class="dd-item ">
        <a href="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/">
        Nunjucks模板引擎常用基础
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/nodemailer/" title="Nodemailer实现邮箱注册" class="dd-item
        
        
        
        ">
      <a href="/node.js/nodemailer/">
          Nodemailer实现邮箱注册
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/" title="Node博客系统开发记录" class="dd-item
        
        
        
        ">
      <a href="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/">
          Node博客系统开发记录
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node-%E7%88%AC%E8%99%AB/" title="Node爬虫思路整理" class="dd-item
        
        
        
        ">
      <a href="/node.js/node-%E7%88%AC%E8%99%AB/">
          Node爬虫思路整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/cookiesession%E5%BA%94%E7%94%A8/" title="cookie,session实现登录验证" class="dd-item
        
        
        
        ">
      <a href="/node.js/cookiesession%E5%BA%94%E7%94%A8/">
          cookie,session实现登录验证
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/token%E5%AE%9E%E4%BE%8B/" title="Egg.js: token应用实例" class="dd-item
        
        
        
        ">
      <a href="/node.js/token%E5%AE%9E%E4%BE%8B/">
          Egg.js: token应用实例
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/cookie-%E5%92%8C-session/" title="koa应用cookie,session实例" class="dd-item ">
        <a href="/node.js/cookie-%E5%92%8C-session/">
        koa应用cookie,session实例
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/vue/" title="— Vue.js" class="dd-item
        parent
        
        
        ">
      <a href="/vue/">
          <b>3. </b>— Vue.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门" class="dd-item active">
        <a href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
        vue基础入门
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" class="dd-item ">
        <a href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
        vue组件传值总结
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/vue/vuerouter/" title="VueRouter常用点整理" class="dd-item
        
        
        
        ">
      <a href="/vue/vuerouter/">
          VueRouter常用点整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/web/" title="— Web About" class="dd-item
        
        
        
        ">
      <a href="/web/">
          <b>4. </b>— Web About
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/web/indexeddb/" title="IndexedDB数据库常用函数封装" class="dd-item
        
        
        
        ">
      <a href="/web/indexeddb/">
          IndexedDB数据库常用函数封装
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/web/url%E5%A4%84%E7%90%86/" title="URL手动处理" class="dd-item
        
        
        
        ">
      <a href="/web/url%E5%A4%84%E7%90%86/">
          URL手动处理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/myimg/" title="— 杂 感 . . ." class="dd-item
        
        
        
        ">
      <a href="/myimg/">
          <b>5. </b>— 杂 感 . . .
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/myimg/myimage/" title="Myimages" class="dd-item
        
        
        
        ">
      <a href="/myimg/myimage/">
          Myimages
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
        
    </ul>

    
    
      <section id="shortcuts">
        <h3></h3>
        <ul>
          
              <li>
                  <a class="padding" href="https://gitee.com/wen-yun-li"><i class='fab fa-fw fa-github'></i> — Gitee</a>
              </li>
          
              <li>
                  <a class="padding" href="https://github.com/liwenyun"><i class='fab fa-fw fa-github'></i> — GitHub</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.runoob.com/"><i class='fas fa-fw fa-bookmark'></i>— 菜鸟教程</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.eggjs.org/zh-CN/intro/quickstart"><i class='fas fa-fw fa-bookmark'></i>— Egg.js 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.axios-http.cn/docs/intro"><i class='fas fa-fw fa-bookmark'></i>— Axios 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://v3.cn.vuejs.org/guide/introduction.html"><i class='fas fa-fw fa-bookmark'></i>— Vue.js 文档</a>
              </li>
          
        </ul>
      </section>
    

    
    <section id="prefooter">
      <hr/>
      <ul>
      

      
        <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> </a></li>
      
      </ul>
    </section>
    
    <section id="footer">
      <center>
    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download matcornic/hugo-theme-learn on GitHub">Download</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn" data-icon="octicon-star" data-show-count="true" aria-label="Star matcornic/hugo-theme-learn on GitHub">Star</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matcornic/hugo-theme-learn on GitHub">Fork</a>

    <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="https://getgrav.org">Grav</a> and <a href="https://gohugo.io/">Hugo</a></p>
</center>

<script async defer src="https://buttons.github.io/buttons.js"></script>

    </section>
  </div>
</nav>




        <section id="body">
        <div id="overlay"></div>
        <div class="padding highlightable">
              
              <div>
                <div id="top-bar">
                
                  
                  
                  
                  <div id="top-github-link">
                    <a class="github-link" title='' href="https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/vue/vue2.0%e8%b5%b7%e6%ad%a5/index.md" target="blank">
                      <i class="fas fa-code-branch"></i>
                      <span id="top-github-link-text"></span>
                    </a>
                  </div>
                  
                
                
                <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <span id="sidebar-toggle-span">
                        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                          <i class="fas fa-bars"></i>
                        </a>
                    </span>
                  
                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
                  
                  <span class="links">
                 
                 
                    
          
          
            
            
          
          
            
            
          
          
            <a href='/'>LIWENYUN BLOG</a> > <a href='/vue/'>— Vue.js</a> > vue基础入门
          
        
          
        
          
        
                 
                  </span>
                </div>
                
                    <div class="progress">
    <div class="wrapper">
<nav id="TableOfContents">
  <ul>
    <li><a href="#安装和引入vuejs">安装和引入Vue.js</a>
      <ul>
        <li><a href="#第一个vue项目">第一个Vue项目</a></li>
        <li><a href="#绑定属性">绑定属性</a></li>
        <li><a href="#绑定事件">绑定事件</a></li>
      </ul>
    </li>
    <li><a href="#创建vue项目">创建Vue项目</a>
      <ul>
        <li><a href="#使用vuecli创建vue项目">使用vue/cli创建Vue项目</a></li>
        <li><a href="#项目目录结构">项目目录结构</a></li>
        <li><a href="#改写appvue文件">改写App.vue文件</a></li>
      </ul>
    </li>
    <li><a href="#基本语法">基本语法</a>
      <ul>
        <li><a href="#指令">指令</a></li>
        <li><a href="#条件判断">条件判断</a></li>
        <li><a href="#显示列表">显示列表</a></li>
        <li><a href="#组件嵌套">组件嵌套</a></li>
      </ul>
    </li>
    <li><a href="#组件传值">组件传值</a>
      <ul>
        <li><a href="#父级向子级传值">父级向子级传值</a></li>
        <li><a href="#子级向父级传值">子级向父级传值</a></li>
        <li><a href="#非父子级组件传值组件传值">非父子级组件传值组件传值</a></li>
      </ul>
    </li>
    <li><a href="#计算属性与侦听器">计算属性与侦听器</a>
      <ul>
        <li><a href="#计算属性">计算属性</a></li>
        <li><a href="#侦听属性">侦听属性</a></li>
        <li><a href="#计算属性与侦听属性选择">计算属性与侦听属性选择</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>

                
              </div>
            </div>
            
        <div id="head-tags">
        
        </div>
        
        <div id="body-inner">
          
            <h1>
              
              vue基础入门
            </h1>
          

        


<h2 id="安装和引入vuejs">安装和引入Vue.js</h2>
<h3 id="第一个vue项目">第一个Vue项目</h3>
<p>有两种方法可以在自己的项目中引入Vue：</p>
<ul>
<li>第一种是像引入jQuery一样，引入Vue.js文件。</li>
<li>第二种是使用Node环境，构建基于Vue的web项目。</li>
</ul>
<p>在真实的项目开发中，都会使用第二种开发方式，本节我们先以第一种-引入Vue.js文件方式起步。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        {{<span style="color:#a6e22e">message</span>}}
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;vue.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello world&#34;</span>
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }).<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span>
</span></span></code></pre></div><p>上面的代码包含了一个vue程序最基本的结构：</p>
<p>首先，我们在html中定义了一个id为app的容器，然后我们在js创建一个Vue的实例，通过el属性指定这个容器，从而实现让js接管html。</p>
<p>每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">vm</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">// 选项
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>}
</span></span></code></pre></div><ul>
<li>在构造函数Vue中，我们需要传入一个【选项对象】来进一步描述vue实例的行为。</li>
<li>$mount方法，将Vue挂载到html。</li>
<li>el属性，作用与$mount相同。</li>
<li>data属性，在Vue的实例之下添加属性。</li>
<li>{{}}可以输入一个表达式，也可以直接获取Vue实例的属性。</li>
</ul>
<h3 id="绑定属性">绑定属性</h3>
<p>上面的例子中，我们将一个data中的message属性通过双花括号显示在文本节点之中，除此之外，我们还可以将数据绑定成为一个html属性，示例代码如下所示。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">bind</span><span style="color:#f92672">:</span><span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;message&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">鼠标停留在这个H1标签上</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">可以看到title</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;message&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">鼠标停留在这个H1标签上</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">可以看到title</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;../../script/vue.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello world&#34;</span>
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }).<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span>
</span></span></code></pre></div><p><strong>简写</strong>:使用【v-bind:属性名】和【:属性名】两种方式绑定属性。</p>
<h3 id="绑定事件">绑定事件</h3>
<p>在【选项对象】中可以设置methods属性为vue的示例添加方法，这些方法我已直接被调用，也可以绑定为事件。绑定事件的方法如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">on</span><span style="color:#f92672">:</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fun&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">按钮</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fun&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">按钮</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;../../script/vue.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">fun</span>(){
</span></span><span style="display:flex;"><span>                    <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#34;hello world&#34;</span>)
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }).<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span>
</span></span></code></pre></div><p><strong>简写</strong>:使用【v-on:事件类型】和【@事件类型】两种方式为元素绑定事件.</p>
<p>methods属性中定义的方法内部，可以使用this获取到vue的示例，也就是说我们可以进一步通过this获取到data中的属性，而且可以通过赋值的方式改变data中的属性值。</p>
<!-- raw HTML omitted -->
<h4 id="事件修饰符详解">事件修饰符详解</h4>
<ul>
<li>.prevent:阻止元素的默认行为</li>
<li>.stop:阻止事件冒泡</li>
<li>.once:只触发一次事件</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">阻止元素默认行为</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">form</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">submit</span>.<span style="color:#a6e22e">prevent</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;postData&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;submit&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/form&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;js/vue.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">//jquery：操作DOM
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">vue</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">postData</span>(){
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;提交数据&#34;</span>);
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    });
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">vue</span>.<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">阻止事件冒泡</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span>.<span style="color:#a6e22e">once</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;test&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">test</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;js/vue.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">vue</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">test</span>(){
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;提交数据&#34;</span>);
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    });
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">vue</span>.<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#34;#app&#34;</span>)
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><h2 id="创建vue项目">创建Vue项目</h2>
<h3 id="使用vuecli创建vue项目">使用vue/cli创建Vue项目</h3>
<p>我们需要安装一个名为@vue/cli的包来创建我们的vue项目，安装代码如下所示：<br>
<code>npm install -g @vue/cli</code><br>
安装完成之后，在命令行可以使用Vue命令命令创建一个vue项目，具体命令如下所示<br>
<code>vue create hello</code><br>
创建完成之后，让命令行工具进入到hello目录中，然后执行下面的命令启动项目：<br>
<code>npm run serve</code><br>
项目启动后，会在8080端口开启一个服务器，直接访问http://localhost:8080/，就可以访问刚才创建的这个Vue项目了。</p>
<h3 id="项目目录结构">项目目录结构</h3>
<p>创建的项目目录结构如下所示：
<img src="%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84.jpg" alt=""></p>
<h4 id="重要文件介绍">重要文件介绍</h4>
<ul>
<li>node_modules：存放项目依赖包</li>
<li>public：存放静态文件(例如图片等)</li>
<li>src：项目源文件，后续开发几乎都在这个目录下进行</li>
<li>main.js为项目的入口文件</li>
<li>App.vue是单文件组</li>
</ul>
<h4 id="程序是如何运行的">程序是如何运行的？</h4>
<p>import和export是ES2015的语法，类似于node的require和module.export</p>
<ul>
<li>import:引入第三方模块，可以取代require</li>
<li>export:暴露接口，让其他模块使用当前模块</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Vue</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vue&#39;</span>  
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">App</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./App.vue&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">config</span>.<span style="color:#a6e22e">productionTip</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span> <span style="color:#75715e">//开发过程中的错误提示
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">render</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">h</span> =&gt; <span style="color:#a6e22e">h</span>(<span style="color:#a6e22e">App</span>),
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#39;#app&#39;</span>)
</span></span></code></pre></div><p>render方法是一个ES6语法的简写，如果完整的写法可以看做如下语法</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>({
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">render</span> (<span style="color:#a6e22e">createElement</span>) {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">createElement</span>(<span style="color:#a6e22e">App</span>);
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">$mount</span>(<span style="color:#e6db74">&#39;#app&#39;</span>)
</span></span></code></pre></div><p>render方法中的createElement可以根据组件生成DOM节点，这样，就成功地将单文件组件App.vue加载到index.html中了。</p>
<h3 id="改写appvue文件">改写App.vue文件</h3>
<p>我们删除App.vue的默认代码，只留下一个组件的估价，代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>     <span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">组件的应用</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">//  导入其他组件，定义该组件的数据、方法等
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>     <span style="color:#75715e">/* 组件的样式  */</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/style&gt;</span>
</span></span></code></pre></div><ul>
<li>template标签中添加的是html代码，template内部所有内容都要包含在一个标签之内。</li>
<li>script标签中添加的是JavaScript代码</li>
<li>style标签中添加的是CSS样式。</li>
</ul>
<p>编写第一个组件，示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">message</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello vue&#34;</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>上面的案例，将data中的数据在文本中显示。</p>
<ul>
<li>因为是单文件组件，所以需要在script中，用模块化的语法export default将组件的示例暴露给外部。这样组件文件才能被使用。</li>
<li>data属性变成了一个方法，而data中的数据是data方法的返回值。</li>
</ul>
<p>绑定属性和事件的方法如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;message&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">hello</span> <span style="color:#a6e22e">world</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sayHi&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">say</span> <span style="color:#a6e22e">hi</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello vue&#34;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">sayHi</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#34;Hi!&#34;</span>)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><h2 id="基本语法">基本语法</h2>
<h3 id="指令">指令</h3>
<p>指令 (Directives) 是带有 v- 前缀的特殊属性，如下所示：</p>
<ul>
<li>v-bind</li>
<li>v-on</li>
</ul>
<h3 id="条件判断">条件判断</h3>
<p>通过v-if和v-show指令可以控制元素的显示与隐藏，区别如下：</p>
<ul>
<li>v-if=&lsquo;false&rsquo;：不会渲染DOM，查看元素不可见。</li>
<li>v-show=&lsquo;false&rsquo;：会渲染DOM，查看元素可见，但是样式为display:none;
下面我们通过事件来控制元素的可见性。</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;showOrNot&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">显示与隐藏</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">if</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;isShow&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">hello</span> <span style="color:#a6e22e">world</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#a6e22e">show</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;isShow&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">hello</span> <span style="color:#a6e22e">world</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">isShow</span><span style="color:#f92672">:</span><span style="color:#66d9ef">true</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">showOrNot</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isShow</span> <span style="color:#f92672">=</span> <span style="color:#f92672">!</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isShow</span>;
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="显示列表">显示列表</h3>
<p>显示列表的功能在web应用中是非常常见的，例如文章列表、博客列表，学生列表等等，可以使用v-for指令将数据绑定在列表中，实例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fruit in fruits&#34;</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">fruit</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">fruits</span><span style="color:#f92672">:</span>[<span style="color:#e6db74">&#34;香蕉&#34;</span>,<span style="color:#e6db74">&#34;苹果&#34;</span>,<span style="color:#e6db74">&#34;鸭梨&#34;</span>]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>v-for=&ldquo;fruit in fruits中的fruit是fruits中的元素，fruits是data中的数据，此数据是一个数组，fruit则是数组中的元素。</p>
<p>可以通过下面的方式获取索引值</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">li</span> <span style="color:#a6e22e">v-for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;fruit,index in fruits&#34;</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">p</span>&gt;名称：{{fruit}}&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">p</span>&gt;索引：{{index}}&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">li</span>&gt;
</span></span></code></pre></div><p>在开发的过程中，经常会遇到这种情况，数据集合的每一个元素并不是简单的字符串，而是对象，我们同样可以使用v-for执行遍历所以元素以及元素的属性。</p>
<p>示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">students</span><span style="color:#f92672">:</span>[
</span></span><span style="display:flex;"><span>                {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>,<span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">2</span>},
</span></span><span style="display:flex;"><span>                {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小亮&#34;</span>,<span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">3</span>},
</span></span><span style="display:flex;"><span>                {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小红&#34;</span>,<span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">4</span>},
</span></span><span style="display:flex;"><span>            ]
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">table</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">thead</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">th</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">序号</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/th&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">th</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">姓名</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/th&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">th</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">年龄</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/th&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/thead&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">tbody</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">tr</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-</span><span style="color:#66d9ef">for</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;student,index in students&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>            <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">index</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/td&gt;</span>
</span></span><span style="display:flex;"><span>            <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">student</span>.<span style="color:#a6e22e">name</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/td&gt;</span>
</span></span><span style="display:flex;"><span>            <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">td</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">student</span>.<span style="color:#a6e22e">age</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/td&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/tr&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/tbody&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/table&gt;</span>
</span></span></code></pre></div><p>上述代码将一个学生列表数据放在了表格元素内。</p>
<h3 id="组件嵌套">组件嵌套</h3>
<h4 id="组件命名">组件命名</h4>
<p>自定义组件一般在components目录中创建，命名用大驼峰的方式。</p>
<p>我们创建两个组件，分别命名如下：</p>
<ul>
<li>Hello</li>
<li>HelloWorld</li>
</ul>
<p>如果首字母小写切与html标签重名，程序会报错。</p>
<h4 id="注册组件">注册组件</h4>
<p>通过下面的代码，可以将外部组件引入到当前组件</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Hello</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@/components/Hello&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">HelloWorld</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@/components/HelloWorld&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">Hello</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">HelloWorld</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>在template中，组件的标签不区分大小写，切驼峰命名的组件可以使用 - 链接。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">hello</span>&gt;&lt;/<span style="color:#f92672">hello</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">Hello</span>&gt;&lt;/<span style="color:#f92672">hello</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">HelloWorld</span>&gt;&lt;/<span style="color:#f92672">HelloWorld</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">Hello-world</span>&gt;&lt;/<span style="color:#f92672">Hello-World</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span></code></pre></div><p>一个项目中，推荐使用统一的写法。</p>
<h2 id="组件传值">组件传值</h2>
<p>组件传值的三种情况：</p>
<ul>
<li>父级向子级传递数据</li>
<li>子级向父级传递数据</li>
<li>非父子级传递数据</li>
</ul>
<h3 id="父级向子级传值">父级向子级传值</h3>
<p>父级可以通过属性向自己传递数据，示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">父级</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Child</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">msg</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;message&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/Child&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Child</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;./components/Child.vue&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span><span style="color:#75715e">// 注册组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">Child</span>},
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello child&#34;</span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">子级</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">msg</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span>[<span style="color:#e6db74">&#34;msg&#34;</span>]
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>1.创建子组件，在src/components/文件夹下新建一个Child.vue<br>
2.Child.vue的中创建props，然后创建一个名为message的属性</p>
<h3 id="子级向父级传值">子级向父级传值</h3>
<p>子级想父级传递数据需要用自定义事件。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">子级组件</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sendData&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">sendData</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello father&#34;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">sendData</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$emit</span>(<span style="color:#e6db74">&#34;sendData&#34;</span>,<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">message</span>);
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数</p>
<p>在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">父级组件</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">子级的数据为</span><span style="color:#960050;background-color:#1e0010">：</span>{{<span style="color:#a6e22e">message</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Child</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">sendData</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sd&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/Child&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Child</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;./components/Child.vue&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// 注册组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">Child</span> },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;&#34;</span>
</span></span><span style="display:flex;"><span>        };
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">sd</span>(<span style="color:#a6e22e">childData</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">childData</span>;
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>};
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><h3 id="非父子级组件传值组件传值">非父子级组件传值组件传值</h3>
<p>在src目录中创建一个store.js文件用来统一存储数据</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//store.js
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">state</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello vue&#34;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">setStateMessage</span>(<span style="color:#a6e22e">str</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">message</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">str</span>;
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">sister组件</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">message</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">store</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;../store.js&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;sister组件&#34;</span>,
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">state</span><span style="color:#f92672">:</span><span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">state</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span> <span style="color:#a6e22e">brother组件</span> <span style="color:#f92672">--&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeData&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">change</span> <span style="color:#a6e22e">data</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">store</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;../store.js&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">changeData</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">setStateMessage</span>(<span style="color:#e6db74">&#34;122&#34;</span>);
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">store</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">message</span>)
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><h2 id="计算属性与侦听器">计算属性与侦听器</h2>
<h3 id="计算属性">计算属性</h3>
<p>计算属性中定义的值可以直接绑定在表达式中。如果某些值需要通过计算才能得到，那使用计算属性就再合适不过了。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h1</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">fullTitle</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h1&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">h2</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">title</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/h2&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">title</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;hello world&#34;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">computed</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">fullTitle</span>(){
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#34;晓舟报告-&#34;</span> <span style="color:#f92672">+</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">title</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>在上面的示例代码中fullTitle的值是通过title属性计算而来，所以可以通过computed获得计算的结果，并绑定到表达式中。</p>
<p>但是这个例子并没有说服力，我们还可以用很多其他方法来实现这个功能，那我们再来制作一个计数器效果，让computed属性发挥它的作用。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;app&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">单价</span>{{<span style="color:#a6e22e">price</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sub&#34;</span><span style="color:#f92672">&gt;-&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">span</span><span style="color:#f92672">&gt;</span>{{<span style="color:#a6e22e">count</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/span&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;add&#34;</span><span style="color:#f92672">&gt;+&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">总价</span><span style="color:#960050;background-color:#1e0010">：</span>{{<span style="color:#a6e22e">totalPrice</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span></code></pre></div><p>在之前的实例中，在data属性中定义了三个变量：price、count、totalPrice。</p>
<p>利用计算属性可以简化这个示例：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;app&#39;</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;xiaoming&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">count</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">price</span><span style="color:#f92672">:</span><span style="color:#ae81ff">15</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">computed</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">totalPrice</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">count</span> <span style="color:#f92672">*</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">price</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">add</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">count</span><span style="color:#f92672">++</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">sub</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">count</span><span style="color:#f92672">--</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="侦听属性">侦听属性</h3>
<p>侦听属性可以实时监控一个属性的变化，如果这个值发生变化了，可以执行某些操作，我们用侦听器来改写上面的计数器功能，示例代码如下所示</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;app&#39;</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">data</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;xiaoming&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">count</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">price</span><span style="color:#f92672">:</span><span style="color:#ae81ff">15</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">watch</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">count</span>(<span style="color:#a6e22e">newValue</span>,<span style="color:#a6e22e">oldValue</span>){
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">newValue</span>)
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">oldValue</span>)
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">totalPrice</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">newValue</span> <span style="color:#f92672">*</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">price</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>  }, 
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">add</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">count</span><span style="color:#f92672">++</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">sub</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">count</span><span style="color:#f92672">--</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="计算属性与侦听属性选择">计算属性与侦听属性选择</h3>
<p>如果关注的是一个变量的结果，使用计算属性；如果关注一个变量的改变会导致一系列行为，使用侦听属性。</p>


<footer class="footline">
	
</footer>

        
        </div>
        

      </div>

    <div id="navigation">
        
        

        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
            
        

        


	 
	 
		
			<a class="nav nav-prev" href="/vue/" title="— Vue.js"> <i class="fa fa-chevron-left"></i></a>
		
		
			<a class="nav nav-next" href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
		
	
    </div>

    </section>

    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
    </div>
    <script src="/js/clipboard.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.jquery.min.js?1648731304"></script>
    <script src="/js/jquery.sticky.js?1648731304"></script>
    <script src="/js/featherlight.min.js?1648731304"></script>
    <script src="/js/highlight.pack.js?1648731304"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="/js/modernizr.custom-3.6.0.js?1648731304"></script>
    <script src="/js/learn.js?1648731304"></script>
    <script src="/js/hugo-learn.js?1648731304"></script>
    
        
            <script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
        
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105947713-1', 'auto');
  ga('send', 'pageview');

</script>
  </body>
</html>

